<template>
  <div class="h-full flex flex-col bg-gray-50">
    <!-- 顶部导航 -->
    <header class="bg-white border-b border-gray-200 px-6 py-4">
      <h1 class="text-2xl font-bold text-gray-800">批量生成文书工具</h1>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1 flex overflow-hidden">
      <!-- 侧边栏 -->
      <aside class="w-64 bg-white border-r border-gray-200 p-4">
        <nav class="space-y-2">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            @click="activeTab = tab.id"
            :class="[
              'w-full text-left px-4 py-2 rounded-lg transition-colors',
              activeTab === tab.id
                ? 'bg-blue-500 text-white'
                : 'text-gray-700 hover:bg-gray-100'
            ]"
          >
            {{ tab.name }}
          </button>
        </nav>
      </aside>

      <!-- 内容区 -->
      <div class="flex-1 overflow-auto p-6">
        <TemplateManager v-if="activeTab === 'template'" />
        <OCRRecognition v-if="activeTab === 'ocr'" />
        <AutoFill v-if="activeTab === 'fill'" />
        <Settings v-if="activeTab === 'settings'" />
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import TemplateManager from './components/TemplateManager.vue'
import OCRRecognition from './components/OCRRecognition.vue'
import AutoFill from './components/AutoFill.vue'
import Settings from './components/Settings.vue'
import { templateAPI, configAPI } from './api/app.js'

const activeTab = ref('template')

const tabs = [
  { id: 'template', name: '模板管理' },
  { id: 'ocr', name: 'OCR 识别' },
  { id: 'fill', name: '自动填充' },
  { id: 'settings', name: '设置' },
]

// 应用启动时加载模板（只加载一次）
onMounted(async () => {
  try {
    // 加载配置
    const config = await configAPI.get()
    
    // 如果配置了模板文件夹，自动导入模板
    if (config.templatesFolder) {
      try {
        await templateAPI.importFromFolder(config.templatesFolder)
        console.log('模板加载完成')
      } catch (error) {
        console.error('自动加载模板失败:', error)
      }
    }
  } catch (error) {
    console.error('初始化失败:', error)
  }
})
</script>

